<template>
  <div id="login">
    <el-page-header @back="goBack" content="用户注册" style="margin-top: 15px">
    </el-page-header>

    <div class = "loginShow">
      <el-row><p></p></el-row>
      用户登录
      <el-divider></el-divider>
      <el-form ref="form" :model="form" label-width="80px" label-suffix = ":" >
        <el-form-item label="用户名" prop="userName" style="margin-left: 5px">
          <el-input v-model="form.userName" placeholder="请输入用户名" style="width: 255px;margin-right: 80px"></el-input>
        </el-form-item>
        <el-form-item label="密码" style="margin-left: 5px">
          <el-input type="password" v-model="form.password" placeholder="请输入密码" style="width: 255px;margin-right: 80px"></el-input>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="onLogin(form.userName,form.password)" style="width: 255px;margin-right: 57px">
            <router-link to="../user/test" tag="a" target="_blank">登录</router-link>

          </el-button>

        </el-form-item>

      </el-form>
    </div>

  </div>


</template>

<script>

  import Axios from 'axios'
  import jwtDecode from 'jwt-decode'

  //用axios进行前后端通信
  const instance = Axios.create({
    baseURL: 'http://localhost:8081/api/pri/user',
    timeout: 5000,
    headers: { "content-type": "application/json" }
  })


  export default {
        userName: "login",
    created() {

        },
    data(){
          return{

            accuracy: 1,
            isShow: false,

            form: {
              userName: '',
              password: '',
            },



          }
        },
        methods: {
          onLogin(userName,password){
            //测试this.$router.push
            this.$router.push('/loginAfterIndex');

            //重要！！！！！！！！！！！
            const Qs = require('qs');
            instance.post('login', Qs.stringify({userName:userName,password:password})).then(res=> {
              console.log(res.data.data);
              try {
                if (res.data.data != null) {
                  window.localStorage.setItem('token', JSON.stringify(res.data.data));
                }
              }catch (e) {
                console.log(e.message);
              }
              const decode =  jwtDecode(res.data.data);
              console.log(decode);
              if (decode===null) {
                this.$message({
                  message: '获取服务器信息错误！',
                  type: 'error'
                })

                if (decode.user_state === 0) {
                  this.$message({
                    message: '登陆失败，尚未认证！请寻找管理员认证！',
                    type: 'warning'
                  })
                }
                if (decode.user_state === 1) {
                  this.$message({
                    message: '恭喜你登陆成功！',
                    type: 'success'
                  })
                  window.localStorage.setItem('userId',decode.id);
                  window.localStorage.setItem('userName',decode.name);
                  this.$router.push('/loginAfterIndex');
                }
              }


            })

          } ,
          goBack() {
            this.$router.go(-1);
            console.log('go back');
          },




        }



    }
</script>

<style scoped>

  .loginShow{
    position: absolute;
    top: 250px;
    right: 550px;
    width: 400px;
    height: 300px;
    background-color: #f2f4f6;
    border-radius: 10px;
  }

/*填满屏幕*/
  #login{
    text-align: center;
    width: 1463px;
    height: 635px;

  }

  /*#login{*/
  /*  position:absolute;*/
  /*  width:200px;*/
  /*  text-align:right;*/
  /*  top:100px;*/
  /*}*/

  .loginTop{
    height: 100px;
  }
  .divLogin{
    margin: 0 auto;
    width: 100%;
    height: 700px;

  }

  .fade-enter,
  .fade-leave-to {
    transform: translateX(100%);
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: 1s;
  }

  .fade-enter-to {
    transform: translateX(0)
  }
</style>
